<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式布局</title>
  <style>
    /* 媒体类型 */
    h1 {
      width: 600px;
      height: 400px;
      background-image: linear-gradient(30deg, red, yellow, green);
      margin: 0 auto;
      text-align: center;
      font-size: 100px;
      color: white;
      text-shadow: 0 0 10px black;
    }
    /* 只有在打印机或打印预览时才应用的样式 */
    @media print {
      h1 {
        background-color: red;
      }
    }
    /* 只有在屏幕上才应用的样式 */
    @media screen {
      h1 {
        font-family: "楷体";
      }
    }
    /* 一种都应用的样式 */
    @media all {
      h1 {
        color: red;
      }
    }

    /* 媒体特性 */
    * {
      margin: 0;
      padding: 0;
    }
    h2 {
      height: 200px;
      background-color: gray;
      text-align: center;
      line-height: 200px;
      font-size: 100px;
    }
    /* 检测到视口到宽度为 800px 时，应用如下样式 */
    @media (width: 800px) {
      h2 {
        background-color: green;
      }
    }
    /* 检测到视口的宽度小于等于 700px 时，应用如下样式 */
    @media (max-width: 700px) {
      h2 {
        background-color: orange;
      }
    }
    /* 检测到视口的宽度大于等于 900px 时，应用如下样式 */
    @media (min-width: 900px) {
      h2 {
        background-color: deepskyblue;
      }
    }
    /* 检测到视口的高度等于 800px 时，应用如下样式 */
    @media (height: 800px) {
      h2 {
        background-color: yellow;
      }
    }
    /* 检测到屏幕的宽度等于1536px时，应用如下样式 */
    @media (device-width: 1536px) {
      h2 {
        background-image: linear-gradient(red, green);
        color: white;
      }
    }

    /* 运算符 */
    /* 且运算符 */
    @media (min-width: 700px) and (max-width: 800px) {
      h3 {
        background-color: orange;
      }
    }
    /* 或运算符 */
    @media (max-width:700px) or (min-width: 800px) {
      h3 {
        background-color: orange;
      }
    }
    /* 否定运算符 */
    @media not screen {
      h3 {
        background-color: orange;
      }
    }
    /* 肯定运算符 */
    @media only screen and (width:800px) {
      h3 {
        background-color: orange;
      }
    }

    /* 常见阈值 */
    /* 
      width <= 768 px：超小屏幕
      768px < width <= 992px：中等屏幕
      992px < width <= 1200px：大屏幕
      1200px < width：超大屏幕
    */
    /* 超小屏幕 */
    @media screen and (max-width: 768px) {
      h1 {
        font-size: 20px;
      }
    }
    /* 中等屏幕 */
    @media screen and (min-width: 768px) and (max-width: 992px) {
      h1 {
        font-size: 24px;
      }
    }
    /* 大屏幕 */
    @media screen and (min-width: 992px) and (max-width: 1200px) {
      h1 {
        font-size: 28px;
      }
    }
    /* 超大屏幕 */
    @media screen and (min-width: 1200px) {
      h1 {
        font-size: 32px;
      }
    }

  </style>
</head>
<body>
  <h1>新年快乐</h1>
  <h2>你好啊</h2>
  <h3>很高兴见到你</h3>
</body>
</html>